<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: #222;
			}
			.downdown,.down,.up{
				width: 100px;
				height: 100px;
				background: #FFF;
				border-radius:50%;
				position: absolute;
				top:300px;
				left: 300px;
				
			}
			.downdown{
				background: rgba(51,255,255,1);
				animation: downdown 3s infinite;
			}
			@keyframes downdown {
				from{}
				to{
				width: 300px;
				height: 300px;
				background: rgba(51,255,255,0);
				top:200px;
				left: 200px;
				}
			}
			
			.down{
				background: rgba(255,255,255,1);
				animation: down 3s infinite;
			}
			@keyframes down {
				from{}
				to{
				width: 200px;
				height: 200px;
				background: rgba(255,255,255,0);
				top:250px;
				left: 250px;
				}
			}
			
			.up{
				background: rgba(255,255,255,1);
				animation: up 3s infinite;
			}
			@keyframes up{
				from{}
				to{
				width: 150px;
				height:150px;
				background: rgba(255,255,255,0);
				top:275px;
				left: 270px;
				}
			}
		</style>
	</head>
	<body>
		<div class="downdown"></div>
		<div class="down"></div>
		<div class="up"></div>
	</body>
</html>
